><template>
    <div class="dh_xgj_details">

        <div class="d_x_d-list">

            <table class="d_x_d-l-table">
                <tr>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>手机</th>
                    <th>密码</th>
                    <th>客户详情</th>
                </tr>
                <tr v-for="(item,key) in hrtable" :key="key">
                    <td>{{item.username}}</td>
                    <td>{{item.password}}</td>
                    <td>{{item.realname}}</td>
                    <td>{{item.phone}}</td>
                    <td class="d_x_d-l-t-btn"><router-link :to="'/client/' + item.id">查看</router-link></td>
                </tr>
            </table>

        </div>

        <div class="d_j_det-block mt20">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                layout="prev, pager, next, jumper"
                :page-count="pagecount"
                >
            </el-pagination>
        </div>

    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            // 客户列表渲染的数据
            hrtable:[],
            login: {},                          //缓存中的用户名跟密码
            currentPage: 1,						//分页的默认页数
            pagecount: 0,						//总页数
        };
    },
    computed: {},
    watch: {},
    methods: {
         //分页的跳页函数
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.requestdata()
        },
        requestdata(){
            const that = this;
            let axios = require('axios');
            let data = {name:that.login.uname,password:that.login.pwd,page: that.currentPage}
            let updata = JSON.stringify(data)
            // console.log(data,updata)
            axios({
                method: 'post',
                url: '/api/api/dh_school/b_getstaff.php',
                headers: { "Content-Type": "appliction/JSON" },
                data: updata
            })
            .then( resp=> {
                // console.log(resp)
                if(that.pagecount === 0){
                    that.pagecount = resp.data.code
                }
                that.hrtable = resp.data.data
            })
            .catch( err=> { 
                // console.log(err)
            })
        }
    },
    created() {},
    mounted() {
        const that = this;
        that.login = JSON.parse(sessionStorage.getItem("dh_xgj_login"))
        that.requestdata()
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
/* @import url(); 引入公共css类 */
    .dh_xgj_details{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .d_x_d-l-table{
        width: 100%;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 1px 1px 5px rgb(77, 77, 77);
        border-collapse: collapse;
    }
    .d_x_d-l-table>tr{
        height: 50px;
    }
    .d_x_d-l-table>tr:nth-child(even){
        color: white;
        background-color: rgb(168, 168, 168);
    }
    .d_x_d-l-t-btn>button.el-button{
        padding: 8px 12px;
        border: none;
        color: white;
        font-size: 14px;
        background-color: #00aeff;
    }
</style>